<template>
  <div class="home">
    <!-- 背景图片容器 -->
    <div class="background-container">
      <div class="background-image"></div>
      <div class="background-overlay"></div>
    </div>
    <!-- 现代科技感头部 -->
    <div class="modern-header">
      <div class="header-bg">
        <div class="tech-lines"></div>
        <div class="tech-dots"></div>
      </div>
      <div class="header-content">
        <div class="company-logo">
          <div class="logo-icon">
            <van-icon name="shop-o" size="24" color="#ffffff" />
          </div>
          <div class="company-info">
            <h1 class="company-name">诺威新型建材</h1>
            <p class="company-subtitle">NORWEY BUILDING MATERIALS</p>
          </div>
        </div>
        <div class="header-status">
          <div class="status-indicator">
            <div class="status-dot active"></div>
            <span class="status-text">智能预约系统</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 公司建筑轮播图 -->
    <div class="company-carousel">
      <van-swipe class="building-swipe" :autoplay="3000" indicator-color="white" :show-indicators="true">
        <van-swipe-item>
          <div class="carousel-item building-1">
            <div class="company-name-overlay">
              <p>安徽诺威新型建材有限公司</p>
            </div>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="carousel-item building-2">
            <div class="company-name-overlay">
              <p>现代化生产基地</p>
            </div>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="carousel-item building-3">
            <div class="company-name-overlay">
              <p>优质建材供应商</p>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 主要功能按钮 -->
    <div class="main-actions">
      <div class="action-button appointment-entry" @click="handleAppointmentEntry">
        <div class="button-content">
          <div class="button-text">
            <h3>预约进场</h3>
            <p>Appointment</p>
          </div>
          <van-icon name="calendar-o" size="24" />
        </div>
      </div>
      
      <div class="action-button appointment-record" @click="handleAppointmentRecord">
        <div class="button-content">
          <div class="button-text">
            <h3>预约记录</h3>
            <p>Record</p>
          </div>
          <van-icon name="orders-o" size="24" />
        </div>
      </div>
    </div>

    <!-- 综合服务 -->
    <div class="comprehensive-services">
      <h3 class="section-title">综合服务</h3>
      <div class="service-item" @click="handleInquiry">
        <div class="service-icon">
          <van-icon name="search" size="28" color="#3b82f6" />
        </div>
        <div class="service-text">
          <span>磅单查询</span>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <van-tabbar v-model="active" class="custom-tabbar" @change="onTabChange">
      <van-tabbar-item icon="home-o">
        <span>首页12</span>
      </van-tabbar-item>
      <van-tabbar-item icon="qr">
        <span>二维码</span>
      </van-tabbar-item>
      <van-tabbar-item icon="user-o">
        <span>我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'
import { setWechatOpenId, setWechatUnionId, setWechatAccessToken, getWechatOpenId, getWechatAccessToken } from '../store.js'
import api from '../api/index.js'

const active = ref(0)
const router = useRouter()

// 主要功能按钮事件
const handleAppointmentEntry = () => {
  router.push('/delivery-code')
}

const handleAppointmentRecord = () => {
  router.push('/appointment-record')
}

// 综合服务
const handleInquiry = () => {
  router.push('/weighing-inquiry')
}

// 底部导航切换
const onTabChange = (index) => {
  switch (index) {
    case 0:
      // 当前页面，不需要跳转
      break
    case 1:
      router.push('/qr-code')
      break
    case 2:
      router.push('/profile')
      break
  }
}

// 检查是否在微信环境中
  const isWechatEnvironment = () => {
    const ua = navigator.userAgent.toLowerCase()
    const isInWechat = ua.indexOf('micromessenger') !== -1
    
    // 打印到浏览器控制台
    console.log('当前浏览器用户代理:', ua)
    console.log('是否在微信环境中:', isInWechat)
    
    // 如果在微信环境中，额外打印一些调试信息
    if (isInWechat) {
      //alert('微信环境检测结果: 是 - 可以使用微信相关功能')
    } else {
      console.log('微信环境检测结果: 否 - 当前在普通浏览器环境')
    }
    
    return isInWechat
  }


// 微信公众号获取openId的方法
const getWechatIdsFromBackend = async () => {
  // alert('获取微信OpenID')
  try {
    // 检查是否已经存在微信识别ID
    const existingOpenId = getWechatOpenId()
    // alert('existingOpenId:' + existingOpenId)
    if (existingOpenId) {
      console.log('使用已保存的微信OpenID:', existingOpenId)
      // alert('使用已保存的微信OpenID:' + existingOpenId)
      return
    }
    
    // 检查是否在微信环境中
    const inWechat = isWechatEnvironment()
    
    if (!inWechat) {
      console.log('不在微信环境中，无法获取微信OpenID')
      showToast('请在微信环境中使用本功能')
      return
    }
    
    // 检查URL中是否包含微信授权返回的code
    // alert('window.location.search:' + window.location.search)
    const urlParams = new URLSearchParams(window.location.search)
    const code = urlParams.get('code')
    
    if (!code) {
      // alert('URL中没有微信授权code')
      // 没有code，需要重定向到微信授权页面
      console.log('URL中没有微信授权code，需要重定向到授权页面')
      
      // 构造授权URL，这里需要替换为实际的公众号appId
      const appId = 'wx932cdf6fa3f48f50' // 请替换为实际的微信公众号appId
      // 注意：redirect_uri必须与微信公众平台后台配置的授权域名完全一致
      // 这里应该使用已备案并在微信公众平台配置的域名
      const redirectUri = encodeURIComponent('http://natsystem.gnway.org:52655/'); // 编码回调地址（必须是配置的域名下的地址）
      const scope = 'snsapi_base' // 静默授权模式，不弹出授权页面
      
      // 微信授权URL
      //const authorizeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`
      const authorizeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx932cdf6fa3f48f50&redirect_uri=http://natsystem.gnway.org&response_type=code&scope=snsapi_userinfo&state=snsapi_userinfo&connect_redirect=1#wechat_redirect`
      console.log('即将重定向到微信授权页面:', authorizeUrl)
      // alert('即将重定向到微信授权页面:' + authorizeUrl)
      // 在实际环境中应该执行下面的重定向
      // window.location.href = authorizeUrl
      
      // 实际执行重定向到微信授权页面
      console.log('执行重定向到微信授权页面:', authorizeUrl)
      window.location.href = authorizeUrl
    } else {
      // 有code，调用后端接口获取openId
      console.log('发现微信授权code，根据code调用后端接口获取openId:', code)
      // alert('发现微信授权code，调用后端接口获取openId:' + code)
      
      // 调用后端接口，使用code获取openId
      const response = await api.getWechatIdsByCode(code)
      
      // 调试：打印后端返回的完整数据结构
      console.log('=== 后端返回的完整数据 ===', JSON.stringify(response, null, 2))
      alert('后端返回数据: ' + JSON.stringify(response))
      
      // 根据实际数据结构提取信息
      // response = {"msg":"操作成功","code":200,"data":{"access_token":"...","openid":"..."}}
      let openid = null
      let unionid = null
      let access_token = null
      
      // 检查返回码
      if (response && response.code === 200 && response.data) {
        // 从 response.data 中提取数据
        openid = response.data.openid
        unionid = response.data.unionid  // 可能不存在
        access_token = response.data.access_token
        
        console.log('数据提取成功:', { openid, unionid, access_token })
      } else {
        console.error('后端返回格式异常或请求失败:', response)
        alert('获取微信信息失败: ' + (response?.msg || '未知错误'))
        return
      }
      
      // 存储到 localStorage
      if (openid) {
        setWechatOpenId(openid)
        console.log('✅ OpenID 存储成功:', openid)
      } else {
        console.error('❌ OpenID 为空，未能存储')
      }
      
      if (unionid) {
        setWechatUnionId(unionid)
        console.log('✅ UnionID 存储成功:', unionid)
      } else {
        console.warn('⚠️ UnionID 为空（snsapi_userinfo才会返回）')
      }
      
      // 验证存储结果
      const storedOpenId = localStorage.getItem('wechatOpenId')
      const storedUnionId = localStorage.getItem('wechatUnionId')
      console.log('=== localStorage 存储验证 ===')
      console.log('wechatOpenId:', storedOpenId)
      console.log('wechatUnionId:', storedUnionId)
      
      // 如果存在access_token，则存储
      if (access_token) {
        setWechatAccessToken(access_token)
        console.log('✅ AccessToken 存储成功')
      }
      
      // 显示信息
      alert(`微信授权成功
OpenID: ${openid || '未获取'}
UnionID: ${unionid || '未获取'}

已存储到localStorage`)
    }
  } catch (error) {
      console.error('获取微信识别ID失败:', error)
      showToast('获取微信识别ID失败，请重试')
    }
}

// 获取微信access_token的方法
const fetchWechatAccessToken = async () => {
  try {
    console.log('开始获取微信access_token')
    
    // 首先检查是否已有存储的access_token
    const existingToken = getWechatAccessToken()
    if (existingToken) {
      console.log('使用已存储的access_token:', existingToken)
      return existingToken
    }
    
    // 调用后端API获取access_token
    console.log('发起API请求到 /wechat/access-token')
    const response = await api.getWechatAccessToken()
    console.log('access_token完整响应:', JSON.stringify(response))
    
    // 尝试多种可能的数据结构解析
    let accessToken = null
    
    // 尝试常见的返回格式
    if (response && typeof response === 'object') {
      // 检查各种可能的键名和嵌套结构
      const possibleKeys = ['accessToken', 'access_token', 'token', 'AccessToken']
      
      // 检查直接属性
      for (const key of possibleKeys) {
        if (response[key]) {
          accessToken = response[key]
          console.log(`找到access_token在直接属性 ${key} 中`)
          break
        }
      }
      
      // 检查data对象
      if (!accessToken && response.data && typeof response.data === 'object') {
        for (const key of possibleKeys) {
          if (response.data[key]) {
            accessToken = response.data[key]
            console.log(`找到access_token在data.${key} 中`)
            break
          }
        }
      }
      
      // 检查result对象
      if (!accessToken && response.result && typeof response.result === 'object') {
        for (const key of possibleKeys) {
          if (response.result[key]) {
            accessToken = response.result[key]
            console.log(`找到access_token在result.${key} 中`)
            break
          }
        }
      }
    }
    
    if (accessToken) {
      // 存储access_token
      setWechatAccessToken(accessToken)
      
      // 显示成功信息
      const currentToken = getWechatAccessToken()
      console.log('微信access_token获取并存储成功:', currentToken)
      
      // 在微信环境中显示token
      if (isWechatEnvironment()) {
        alert(`微信Access Token获取成功:\n${currentToken}`)
      }
      
      return currentToken
    } else {
      console.error('未获取到有效的access_token，响应格式可能不符合预期')
      showToast('未获取到有效的access_token')
      return null
    }
  } catch (error) {
    console.error('获取微信access_token请求失败:', error.message || error)
    if (error.response) {
      console.error('错误响应详情:', error.response.status, error.response.data)
    }
    showToast('获取access_token网络请求失败')
    
    // 错误情况下不使用模拟token
      return null
  }
}

// 首页初始化逻辑
onMounted(async () => {
  console.log('开始首页初始化')
  
  // 1. 首先检查是否已经存在微信识别ID
  const existingOpenId = getWechatOpenId()
  
  if (existingOpenId) {
    console.log('使用已保存的微信识别ID:', existingOpenId)
    return
  }
  
  // 2. 检查是否在微信环境中
  const inWechat = isWechatEnvironment()
  console.log('微信环境检测结果:', inWechat ? '是' : '否')
  
  // 3. 调用微信公众号授权获取openId的流程
  await getWechatIdsFromBackend()
  
  // 4. 确保获取微信access_token
  const accessToken = await fetchWechatAccessToken()
  if (accessToken) {
    console.log('初始化完成，已成功获取access_token')
  } else {
    console.log('初始化完成，access_token获取失败，将在需要时重试')
  }
  
  console.log('首页初始化完成')
  
  // 注意事项:
  // 1. 实际部署前，请将Home.vue中的'YOUR_WECHAT_APPID'替换为真实的微信公众号appId
  // 2. 后端需要实现'/wechat/get-ids-by-code'接口，接收code参数并调用微信接口获取openId
  // 3. 微信授权域名需要在微信公众平台进行配置
})
</script>

<style scoped>
/* 全局样式优化 - 背景图片主题 */
.home {
  min-height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  /* 为底部导航栏留出空间 */
  padding-bottom: 60px;
}

/* 背景图片容器 */
.background-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 背景图片 */
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 背景遮罩层 */
.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.05) 50%, 
    rgba(255, 255, 255, 0.1) 100%
  );
  backdrop-filter: blur(1px);
}

/* 移动端背景适配 */
@media screen and (max-width: 768px) {
  .background-image {
    background-attachment: scroll; /* 移动端禁用fixed以提升性能 */
    background-size: cover;
  }
}

/* 超小屏幕适配 */
@media screen and (max-width: 375px) {
  .background-image {
    background-position: center top;
  }
}

/* 横屏适配 */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .background-image {
    background-size: cover;
    background-position: center;
  }
}

/* 现代科技感头部设计 */
.modern-header {
  position: relative;
  padding: 0;
  background: linear-gradient(135deg, rgba(30, 60, 114, 0.95) 0%, rgba(42, 82, 152, 0.95) 50%, rgba(59, 130, 246, 0.95) 100%);
  overflow: hidden;
  flex-shrink: 0;
  min-height: 85px;
  z-index: 10;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 科技背景效果 */
.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.tech-lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px),
    linear-gradient(180deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
  background-size: 30px 30px;
  animation: techGrid 20s linear infinite;
}

.tech-dots {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 25% 25%, rgba(147, 197, 253, 0.3) 2px, transparent 2px);
  background-size: 60px 60px;
  animation: techDots 15s ease-in-out infinite;
}

@keyframes techGrid {
  0% { transform: translate(0, 0); }
  100% { transform: translate(30px, 30px); }
}

@keyframes techDots {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

/* 头部内容 */
.header-content {
  position: relative;
  z-index: 2;
  padding: 16px 20px 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.company-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.company-info {
  flex: 1;
}

.company-name {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1px 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
  line-height: 1.2;
}

.company-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* 状态指示器 */
.header-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  position: relative;
}

.status-dot.active {
  animation: statusPulse 2s ease-in-out infinite;
}

.status-dot.active::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: #10b981;
  opacity: 0.3;
  animation: statusRipple 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes statusRipple {
  0% { transform: scale(1); opacity: 0.3; }
  100% { transform: scale(2); opacity: 0; }
}

.status-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  white-space: nowrap;
}

/* 响应式优化 */
@media screen and (max-width: 375px) {
  .company-name {
    font-size: 20px;
  }
  
  .company-subtitle {
    font-size: 12px;
  }
  
  .header-content {
    padding: 16px 16px 12px 16px;
  }
  
  .logo-icon {
    width: 40px;
    height: 40px;
  }
}

/* 公司建筑轮播图美化 - 缩小尺寸 */
.company-carousel {
  margin: 16px 16px 20px 16px;
  position: relative;
  flex-shrink: 0;
  z-index: 5;
}

.building-swipe {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  height: 180px;
  position: relative;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.carousel-item {
  height: 180px;
  position: relative;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

.building-1 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
}

.building-1::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 10%;
  width: 60px;
  height: 80px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.building-2 {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  position: relative;
}

.building-2::after {
  content: '';
  position: absolute;
  top: 15%;
  right: 15%;
  width: 50px;
  height: 90px;
  background: rgba(255,255,255,0.15);
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.building-3 {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  position: relative;
}

.building-3::after {
  content: '';
  position: absolute;
  top: 25%;
  right: 12%;
  width: 55px;
  height: 75px;
  background: rgba(255,255,255,0.12);
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.building-1::before,
.building-2::before,
.building-3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 100%);
}

.company-name-overlay {
  position: relative;
  z-index: 2;
  padding: 12px 16px;
  color: white;
  width: 100%;
}

.company-name-overlay p {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
}

/* 主要功能按钮美化 */
.main-actions {
  display: flex;
  gap: 10px;
  margin: 0 16px 24px 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}

.action-button {
  flex: 1;
  border-radius: 12px;
  padding: 18px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.action-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.action-button:hover::before {
  left: 100%;
}

.action-button:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.appointment-entry {
  background: linear-gradient(135deg, #3b82f6, #2563eb, #1d4ed8);
  color: white;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}

.appointment-record {
  background: linear-gradient(135deg, #06b6d4, #0891b2, #0e7490);
  color: white;
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.4);
}

.button-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

.button-text h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.button-text p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
  font-weight: 400;
}

/* 综合服务美化 */
.comprehensive-services {
  margin: 0 16px 0 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 5;
}

.section-title {
  font-size: 18px;
  color: #2c3e50;
  margin: 0 0 16px 0;
  font-weight: 600;
  position: relative;
  padding-left: 12px;
  flex-shrink: 0;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  border-radius: 2px;
}

.service-item {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  backdrop-filter: blur(20px);
}

.service-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(29, 78, 216, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border-color: rgba(59, 130, 246, 0.2);
}

.service-item:hover::before {
  opacity: 1;
}

.service-item:active {
  transform: translateY(-2px) scale(0.98);
}

.service-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(29, 78, 216, 0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.service-text {
  flex: 1;
  position: relative;
  z-index: 1;
}

.service-text span {
  font-size: 18px;
  color: #2c3e50;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* 底部导航现代化 */
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid rgba(59, 130, 246, 0.1);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  padding: 2px 0;
  min-height: 48px;
  z-index: 100;
}

.custom-tabbar .van-tabbar-item {
  color: #64748b;
  transition: all 0.3s ease;
}

.custom-tabbar .van-tabbar-item--active {
  color: #3b82f6;
  font-weight: 600;
}

.custom-tabbar .van-tabbar-item--active .van-icon {
  transform: scale(1.1);
}

/* 响应式优化 */
@media screen and (max-width: 375px) {
  .header-title h2 {
    font-size: 20px;
  }
  
  .button-text h3 {
    font-size: 16px;
  }
  
  .action-button {
    padding: 16px 14px;
  }
  
  .building-swipe {
    height: 160px;
  }
  
  .carousel-item {
    height: 160px;
  }
}

/* 加载动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.action-button,
.service-item {
  animation: fadeInUp 0.6s ease forwards;
}

.action-button:nth-child(1) {
  animation-delay: 0.1s;
}

.action-button:nth-child(2) {
  animation-delay: 0.2s;
}

.service-item {
  animation-delay: 0.3s;
}
</style>